<?php use_helper('I18N') ?>
<link rel="stylesheet" type="text/css" media="screen" href="/css/jquery.autocomplete.css" />
<link rel="stylesheet" type="text/css" href="/css/jcarousel-tango.css" />
<link rel="stylesheet" type="text/css" href="/css/jquery.fancybox.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/fileuploader.css" media="screen" /> 
<link rel="stylesheet" type="text/css" href="/css/validationEngine.jquery.css" />
<script type="text/javascript" src="/js/jquery.validationEngine-es.js" charset="utf-8"></script>
<script type="text/javascript" src="/js/jquery.validationEngine.js" charset="utf-8"></script>
<script type="text/javascript" src="/js/jquery.autocomplete.js"></script>
<script type="text/javascript" src="/js/jquery.jcarousel.js"></script>
<script type="text/javascript" src="/js/jquery.fancybox.js"></script>
<script type="text/javascript" src="/js/jquery.easing.js"></script>
<script type="text/javascript" src="/js/fileuploader.js"></script>  
<script type="text/javascript">
jQuery(document).ready(function() {
  $("#registro_step_one").validationEngine();
  $("#registro_step_two").validationEngine();
  $("#import_form").validationEngine();
  var uploader = new qq.FileUploader({
      element: document.getElementById('uploader-photo'),
      action: "<?php echo url_for('sfGuardRegister/uploadFile') ?>",
      allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
      sizeLimit: 5*1024*1024, // max size   
      minSizeLimit: 0, // min size
      onSubmit: function(id, fileName){
        uploader.setParams({ user_id: $('#step_two_user_id').val() });
      },
      onComplete: function(id, fileName, responseJSON){ $('#uploadedphoto').html('<img src="/uploads/photos/thumbs/'+responseJSON.file+'" >'); },
      debug: true
  });   
  
	$("#btnFinish").bind("click", function() {
    $.fancybox.resize();
    $.fancybox.showActivity();
    
		$.ajax({
			cache	: false,
			url		: "<?php echo url_for('sfGuardRegister/done') ?>",
			success: function(data) {
				$.fancybox(data);
			}
		});
		return false;
	});

	$("#sf_guard_user_location").autocomplete(
		"<?php echo url_for('@sf_guard_getgeo') ?>",
		{
			delay:600,
			minChars:4,
			matchSubset:1,
			matchContains:1,
			cacheLength:10,
			onItemSelect:selectItem,
			onFindValue:findValue,
			formatItem:formatItem,
			autoFill:true
		}
	);
	
  jQuery("#mycarousel").jcarousel({
      scroll: 1,
//      initCallback: mycarousel_initCallback,
      buttonNextHTML: null,
      buttonPrevHTML: null
  });
    
  $("a#boton_submit").click(function(){
    if($("form#import_form").validationEngine('validate')){
      $("form#import_form").submit();
    }
  });

  $("a#to_step_two").click(function(){
    if($("#sf_guard_user_username").val() == ''){
        jQuery('#labeluser').validationEngine('showPrompt', 'Este campo es requerido', 'load', true)
    }
    if($("form#registro_step_one").validationEngine('validate')){
      jQuery('#mycarousel').data('jcarousel').next();
      jQuery('.jcarousel-control>a').each(function(i, el){
        if(jQuery(el).text() == 2){
          jQuery(el).removeClass('ctrl');
          jQuery(el).addClass('visitado');
        }else{
          jQuery(el).removeClass('visitado');
          jQuery(el).addClass('ctrl');
        }
      });

		  $.ajax({
			  type	: "POST",
			  cache	: false,
			  url		: "<?php echo url_for('sfGuardRegister/save') ?>",
			  data	: $('form#registro_step_one').serializeArray(),
			  success: function(id){
			    $("#step_two_user_id").val(id);
			  }
		  });
		}
  });

  $("a#to_step_three").click(function(){
    if($("form#registro_step_two").validationEngine('validate')){
      jQuery('#mycarousel').data('jcarousel').next();
      jQuery('.jcarousel-control>a').each(function(i, el){
        if(jQuery(el).text() == 3){
          jQuery(el).removeClass('ctrl');
          jQuery(el).addClass('visitado');
        }else{
          jQuery(el).removeClass('visitado');
          jQuery(el).addClass('ctrl');
        }
      });
      
		  $.ajax({
			  type	: "POST",
			  cache	: false,
			  url		: "<?php echo url_for('sfGuardRegister/update') ?>",
			  data	: $('form#registro_step_two').serializeArray(),
			  success: function(id){
			    $("#step_two_user_id").val(id);
			  }
		  });
		}
  });

  $("span#location_ex").click( function(){
    $("input#sf_guard_user_location").val($("span#location_ex").html());    
  });

  $("a.boton_invita.Gmail").click( function(){
    $("input#contacts_option").val("Gmail");    
    $("#proveedor").html("Gmail");
    $(this).toggleClass("opaco");
    $("a.boton_invita.Yahoo").addClass("opaco");
    $("a.boton_invita.Hotmail").addClass("opaco");
  });
  $("a.boton_invita.Yahoo").click( function(){
    $("input#contacts_option").val("Yahoo");
    $("#proveedor").html("Yahoo");
    $(this).toggleClass("opaco");
    $("a.boton_invita.Gmail").addClass("opaco");
    $("a.boton_invita.Hotmail").addClass("opaco");

  });
  $("a.boton_invita.Hotmail").click( function(){
    $("input#contacts_option").val("Hotmail");
    $("#proveedor").html("Hotmail");
    $(this).toggleClass("opaco");
    $("a.boton_invita.Yahoo").addClass("opaco");
    $("a.boton_invita.Gmail").addClass("opaco");
  });

  $('#email, #pswd').keyup(function(e) {
	  if(e.keyCode == 13) {
		  $("form#import_form").submit();
	  }
  });

  $('form#registro_step_one input').each(function(){
    $(this).keyup(function(e) {
	    if(e.keyCode == 13) {
		    $("a#to_step_two").click();
	    }
    });
  });

  $('form#registro_step_two input').each(function(){
    $(this).keyup(function(e) {
	    if(e.keyCode == 13) {
		    $("a#to_step_three").click();
	    }
    });
  });
  
  // con esto se impide pasar el foco al siguiente input el cual está en el siguiente form
  $('input#sf_guard_user_password_again').keydown(function(e) {
    if(e.keyCode == 9) { return false;}
  });
  
	$("#import_form").bind("submit", function() {
    if(!$("#contacts_option").val()){
      $("#login_error").html("Please select a provider");
      $("#login_error").show();
      $.fancybox.resize();
      return false;
    }
    $.fancybox.showActivity();
    
		$.ajax({
			type	: "POST",
			cache	: false,
			url		: "<?php echo url_for('invitation/index') ?>",
			data	: $(this).serializeArray(),
			success: function(data) {
				$.fancybox(data);
			}
		});
		return false;
	});
	
	$("#activitiesBtn").click(function() {
    $.fancybox.resize();
    $.fancybox.showActivity();
    
		$.ajax({
			type	: "get",
			cache	: false,
			url		: "<?php echo url_for('sfGuardRegister/activities') ?>",
			data	: "user_id="+$('#step_two_user_id').val(),
			success: function(data) {
				$.fancybox(data);
			}
		});
		return false;
	});
});

function findValue(li) {
	if( li == null ) return alert("No match!");

	// if coming from an AJAX call, let's use the CityId as the value
	if(li.extra) var sValue = li.extra[0];

	// otherwise, let's just display the value in the text box
	else var sValue = li.selectValue;

  $("#sf_guard_user_location_id").val(sValue);
}

function selectItem(li) {
	findValue(li);
}

function formatItem(row) {
	return row[0];
}
</script>

<div id="contenedorcontent" style="height:auto;">
<br /><br /><br /><br /><br /><br /><br />
	<div class="txtinput" id="inputArea2" style="position:relative; width:934px; margin-left:20px; margin-right:20px; margin-top:20px; margin-bottom:20px;">Create account. Already have one? <a href="<?php echo url_for('@sf_guard_signin') ?>" class="txtinput">Sign in</a></div>

          
  <div id="mycarousel" class="jcarousel-skin-tango">
    <div class="jcarousel-control">
    <div style="display:inline" class="txtinput">Registration steps</div>
      <a class="visitado">1</a>
      <a class="ctrl">2</a>
      <a class="ctrl">3</a>
    </div>

    <ul>
      <li><?php echo get_partial('sfGuardRegister/form_step_1', array('form' => $form)) ?></li>
      <li><?php echo get_partial('sfGuardRegister/form_step_2', array('form' => $form, 'location' => $location)) ?></li>
      <li><?php echo get_partial('invitation/form') ?></li>
    </ul>

  </div>



</div>
